<template>
	<view class="page">

		<uni-list>
			<uni-list :border="true">
				<uni-list-item 
					v-for="(item,index) in list" >
					<template v-slot:header>
							<view class="header-flex">
								<view class="flex-item">
									<uni-icons type="smallcircle-filled" class="icon" color="#00dd6b"></uni-icons>
									<uni-dateformat :date="item.create_date"></uni-dateformat>
								</view>
								<view class="flex-item">
									<uni-icons type="smallcircle-filled" class="icon" color="#ffaa00"></uni-icons>
									<view class="slot-box slot-text" v-if="item.progress=='100%'">完成时间：<uni-dateformat :date="item.finish_date"></uni-dateformat></view>
									<text class="slot-box slot-text" v-else>未完成...</text>
								</view>
							</view>
					</template>
					<template v-slot:footer>
						<view class="footer-flex">
							<button type="warn" size="mini" @click="del(item)"  class="btn-act">删除</button>
							<button type="primary" size="mini" class="btn-act" @click="toTest(item)">{{item.progress=="0%" ? '开始测试': item.progress=="100%" ?  '查看结果': '继续测试'}}</button>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-list>

		<button @click="showDrawer('showRight')" type="primary" class="create-btn">创建测试</button>
		<uni-drawer ref="showRight" mode="right" :width="320" @change="change($event,'showRight')">
			<view class="container close">
				<uni-forms>
					<uni-forms-item label="测试类型" name="name">
						<uni-data-select v-model="value" :localdata="range"></uni-data-select>
					</uni-forms-item>
				</uni-forms>
				<view class="btn-group">
					<button @click="submitForm" type="primary" class="btn-item">立即创建</button>
					<button @click="closeDrawer('showRight')"  class="btn-item">取消</button>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	const pageDataCenter = uniCloud.importObject('page-data-center')
	export default {
		data() {
			return {
				list: [],
				value: 0,
				range: [{
					value: 0,
					text: "视辨测试"
				},{
					value: 1,
					text: "听辨测试"
				}
				,{
					value: 2,
					text: "拼写测试"
				},
				],
				words:[]
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			confirm() {},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			toTest(item){
				if(item.progress=='100%'){
					uni.navigateTo({
						url:'./score?id='+item._id+'&type='+item.type
					})
				}else{
					item.type<2 && uni.navigateTo({
						url:'./test?id='+item._id+'&type='+item.type
					})
					item.type==2 && uni.navigateTo({
						url:'./spell?id='+item._id+'&type='+item.type
					})
				}
			},
			getData() {
				uni.showLoading()
				pageDataCenter.getTestList().then((res) => {
					console.log(res)
					this.list = res.data
					uni.hideLoading()
				})
			},
			del(item){
				uni.showModal({
					title: '提示',
					content: '确认删除吗',
					success: async (res)=> {
						if (res.confirm) {
							let res = await pageDataCenter.delTest(item._id)
							console.log(res)
							if(res.code){
								uni.showToast({
									title:'删除成功',
									icon:'none'
								})
								this.getData()
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
					
				})
			},
			async submitForm() {
				let words = await pageDataCenter.getTestWords(this.value) 
				this.words=words.data
				pageDataCenter.submitScore({
					progress: '0%',
					score:'0',
					type:this.value,
					words: this.words
				}).then((res) => {
					console.log(res)
					this.getData()
					this.closeDrawer('showRight')
				})
			}
		}
	}
</script>

<style scoped>
	.page{
		padding-bottom: 80px;
	}
	.container {
		padding: 20px;
		height: 98vh;
		position: relative;
	}
	.btn-group{
		margin-top: 40px;
		position: absolute;
		left: 10%;
		bottom: 40px;
		width: 80%;
	}
	.flex-item{
		display: flex;
		align-items: center;
	}
	.header-flex{
		display: flex;
		flex-direction: column;
		color: #666;
		padding: 10px 0;
	}
	.slot-text{
		line-height: 38px;
		color: #999;
		font-size: 14px;
	}
	.footer-flex{
		position: absolute;
		right: 10px;
		bottom: 10px;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.btn-act{
		height: 24px;
		line-height: 24px;
		margin: 0 5px;
	}
	.btn-item{
		margin: 10px 0;
	}
	.create-btn{
		width: 90%;
		position: fixed;
		right: 5%;
		bottom: 10px;
	}
</style>